<template>
    <div class=''>
        <div class="title">
            <span>浏览动态记录</span>
        </div>
        <div class="list_content" ref="list" @scroll="handleScroll">
            <div class="circle_div" v-for="(item, idx) in circleList" :key="idx">
                <div class="div_left">
                    <div class="img">
                        <img :src="item.icon" />
                    </div>
                    <el-tooltip class="item" effect="light" :content="item.username" placement="top">
                        <span class="left_name">{{ item.username }}</span>
                    </el-tooltip>
                </div>
                <div class="div_right">
                    <span class="right_name">{{ item.circlename }}</span>
                    <span class="right_content">{{ item.content }}</span>
                    <div v-show="item.tagdesc">
                        <el-tag size="mini">{{ item.tagdesc }}</el-tag>
                    </div>
                </div>
            </div>
            <div v-show="showLoading">
                <el-divider>{{loadingText}}</el-divider>
            </div>
        </div>
    </div>
</template>

<script>
import { getCircleListApi, getChatListApi, getChatValueApi } from '@/api/addApp/huYou_api.js'
import { throttle } from 'lodash';
export default {
    name: 'circleMessage',
    props: ['sendData'],
    data() {
        return {
            list:[],
            circleList: [],
            offset: 1,
            limit: 20,
            loadingText:'正在加载中...',
            showLoading:false,//控制加载文本的显示
        };
    },
    components: {

    },
    created() {

    },
    mounted() {
        this.getCircleList();
    },
    methods: {
        //判断是否滚到底部 触发条件
        handleScroll: throttle(function () {
            const list = this.$refs.list;
            // 判断滚动到底部
            if (list.scrollTop + list.clientHeight + 10 + 10 >= list.scrollHeight) {
                
                this.showLoading = true;
                if(this.list.length == this.limit){
                    this.loadingText = '正在加载. . .';
                    this.offset++
                    this.getCircleList();
                }else{
                    this.loadingText = '到底了 没有更多了！';
                }
            }
        }),
        //获取动态列表
        async getCircleList() {
            let data = {
                proof_num: this.sendData.proof_num,
                offset: this.offset,
                limit: this.limit
            }
            try {
                let list = await getCircleListApi(data);
                this.list = list.data
                this.circleList.push(...list.data)
            } catch (error) {
                console.error(error);
            }
        },
    },
};
</script>

<style lang='scss' scoped>
.title {
    height: 50px;
    text-align: center;
    border-bottom: 1px solid #f2f2f2;

    span {
        font-size: 20px;
        font-weight: 900;
        line-height: 50px;
    }
}

.list_content {
    padding-bottom: 100px;
    overflow-y: auto;
    height: 770px;
    .circle_div {
        display: flex;
        padding: 10px 20px;
        border-bottom: 1px solid #f2f2f2;

        .div_left {
            display: flex;
            flex-direction: column;
            width: 56px;

            .img {
                width: 50px;
                height: 50px;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: 10px;
                }
            }

            .left_name {
                width: 56px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

        }

        .div_right {
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-left: 20px;

            .right_name {
                font-size: 15px;
                font-weight: 900;
                max-width: 200px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .right_content {
                font-size: 12px;
                color: #908d8d;
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
        }
    }

}
@media screen and (min-width: 2360px) {
    .list_content{
        height: 724px;
    }
}
@media screen and (min-width: 2561px) {
    .list_content{
        height: 588px;
    }
}
</style>
